<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="用户id" prop="userId">
        <el-input
          v-model="queryParams.userId"
          placeholder="请输入用户id"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="客户风险评估情况：
R1保守型
R2稳健型
R3平衡型
R4成长型
R5进取型" prop="risk">
        <el-input
          v-model="queryParams.risk"
          placeholder="请输入客户风险评估情况：
R1保守型
R2稳健型
R3平衡型
R4成长型
R5进取型"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="重点交叉产品" prop="keyProduct">
        <el-input
          v-model="queryParams.keyProduct"
          placeholder="请输入重点交叉产品"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="在我行是否有贷款" prop="myLoan">
        <el-input
          v-model="queryParams.myLoan"
          placeholder="请输入在我行是否有贷款"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="贷款原因" prop="myLoanReason">
        <el-input
          v-model="queryParams.myLoanReason"
          placeholder="请输入贷款原因："
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="在他行是否有贷款" prop="otherLoan">
        <el-input
          v-model="queryParams.otherLoan"
          placeholder="请输入在他行是否有贷款
无/有"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="贷款原因：" prop="otherLoanReason">
        <el-input
          v-model="queryParams.otherLoanReason"
          placeholder="请输入贷款原因："
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="信用卡张数" prop="creditCardCount">
        <el-input
          v-model="queryParams.creditCardCount"
          placeholder="请输入信用卡张数"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="主要在用他行卡情况" prop="situation">
        <el-input
          v-model="queryParams.situation"
          placeholder="请输入主要在用他行卡情况"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="关注点" prop="focus">
        <el-input
          v-model="queryParams.focus"
          placeholder="请输入关注点"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="他行卡主办行" prop="otherBank">
        <el-input
          v-model="queryParams.otherBank"
          placeholder="请输入他行卡主办行"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="是否借贷关联：
是/否" prop="loanRelevant">
        <el-input
          v-model="queryParams.loanRelevant"
          placeholder="请输入是否借贷关联：
是/否"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="绑定情况：
微信1
支付宝2" prop="bind">
        <el-input
          v-model="queryParams.bind"
          placeholder="请输入绑定情况：
微信1
支付宝2"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="支付绑定银行卡机构" prop="bindInstitution">
        <el-input
          v-model="queryParams.bindInstitution"
          placeholder="请输入支付绑定银行卡机构"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="理财类型：
预期收益型1
净值型2
T+0理财" prop="moneyManage">
        <el-input
          v-model="queryParams.moneyManage"
          placeholder="请输入理财类型：
预期收益型1
净值型2
T+0理财"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="信托等其他代销产品
是/否" prop="trust">
        <el-input
          v-model="queryParams.trust"
          placeholder="请输入信托等其他代销产品
是/否"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="基金：
货币型1
混合型2
指数型3
股票型4
私募5
其他6" prop="fund">
        <el-input
          v-model="queryParams.fund"
          placeholder="请输入基金：
货币型1
混合型2
指数型3
股票型4
私募5
其他6"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="保险：
期缴费型1
泵缴型2
年金型3
分红型4
重疾型5
其他6" prop="insurance">
        <el-input
          v-model="queryParams.insurance"
          placeholder="请输入保险：
期缴费型1
泵缴型2
年金型3
分红型4
重疾型5
其他6"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="已持有保险产品保险公司" prop="insuranceCompany">
        <el-input
          v-model="queryParams.insuranceCompany"
          placeholder="请输入已持有保险产品保险公司"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="贵金属：
收藏类投资型1
饰品型2" prop="nobleMetal">
        <el-input
          v-model="queryParams.nobleMetal"
          placeholder="请输入贵金属：
收藏类投资型1
饰品型2"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="偏爱活动主题：
财富管理1
亲子教育2
健康管理3
文艺活动4
体育运动5
升学留学6
形象提升7
专业咨询8
其他9" prop="activity">
        <el-input
          v-model="queryParams.activity"
          placeholder="请输入偏爱活动主题：
财富管理1
亲子教育2
健康管理3
文艺活动4
体育运动5
升学留学6
形象提升7
专业咨询8
其他9"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="${comment}" prop="productRemark">
        <el-input
          v-model="queryParams.productRemark"
          placeholder="请输入${comment}"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['kycinfo:product:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['kycinfo:product:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['kycinfo:product:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['kycinfo:product:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="productList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="index" width="55" align="center" label="序号" />
      <el-table-column label="客户号" align="center" prop="userInfoId" />
      <el-table-column label="客户风险评估情况" align="center" prop="risk" />
      <el-table-column label="重点交叉产品" align="center" prop="keyProduct" />
      <el-table-column label="在我行是否有贷款" align="center" prop="myLoan" />
      <el-table-column label="贷款原因：" align="center" prop="myLoanReason" />
      <el-table-column label="在他行是否有贷款" align="center" prop="otherLoan" />
      <el-table-column label="贷款原因：" align="center" prop="otherLoanReason" />
      <el-table-column label="信用卡张数" align="center" prop="creditCardCount" />
      <el-table-column label="卡基类别" align="center" prop="creditCardType" />
      <el-table-column label="主要在用他行卡情况" align="center" prop="situation" />
      <el-table-column label="关注点" align="center" prop="focus" />
      <el-table-column label="借记卡类别：" align="center" prop="debitCardType" />
      <el-table-column label="他行卡主办行" align="center" prop="otherBank" />
      <el-table-column label="是否借贷关联：" align="center" prop="loanRelevant" />
      <el-table-column label="绑定情况：" align="center" prop="bind" />
      <el-table-column label="支付绑定银行卡机构" align="center" prop="bindInstitution" />
      <el-table-column label="存款类型：" align="center" prop="depositType" />
      <el-table-column label="理财类型：" align="center" prop="moneyManage" />
      <el-table-column label="信托等其他代销产品" align="center" prop="trust" />
      <el-table-column label="基金" align="center" prop="fund" />
      <el-table-column label="保险" align="center" prop="insurance" />
      <el-table-column label="已持有保险产品保险公司" align="center" prop="insuranceCompany" />
      <el-table-column label="贵金属" align="center" prop="nobleMetal" />
      <el-table-column label="偏爱活动主题：" align="center" prop="activity" />
      <el-table-column label="${comment}" align="center" prop="productRemark" />
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:product:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:product:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改【请填写功能名称】对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="用户id" prop="userId">
          <el-input v-model="form.userId" placeholder="请输入用户id" />
        </el-form-item>
        <el-form-item label="客户风险评估情况：
R1保守型
R2稳健型
R3平衡型
R4成长型
R5进取型" prop="risk">
          <el-input v-model="form.risk" placeholder="请输入客户风险评估情况：
R1保守型
R2稳健型
R3平衡型
R4成长型
R5进取型" />
        </el-form-item>
        <el-form-item label="重点交叉产品：
活期
定期
T+0
理财
基金
保险
贵金属
手机银行
证书版网银
信用卡
个贷
三方存管
代发工资
其他" prop="keyProduct">
          <el-input v-model="form.keyProduct" placeholder="请输入重点交叉产品：
活期
定期
T+0
理财
基金
保险
贵金属
手机银行
证书版网银
信用卡
个贷
三方存管
代发工资
其他" />
        </el-form-item>
        <el-form-item label="在我行是否有贷款
无/有" prop="myLoan">
          <el-input v-model="form.myLoan" placeholder="请输入在我行是否有贷款
无/有" />
        </el-form-item>
        <el-form-item label="贷款原因：
一手房按揭1
二手房按揭2
房抵贷3
公积金网贷4
出国留学贷款5
其他贷款6" prop="myLoanReason">
          <el-input v-model="form.myLoanReason" placeholder="请输入贷款原因：
一手房按揭1
二手房按揭2
房抵贷3
公积金网贷4
出国留学贷款5
其他贷款6" />
        </el-form-item>
        <el-form-item label="在他行是否有贷款
无/有" prop="otherLoan">
          <el-input v-model="form.otherLoan" placeholder="请输入在他行是否有贷款
无/有" />
        </el-form-item>
        <el-form-item label="贷款原因：
一手房按揭1
二手房按揭2
房抵贷3
公积金网贷4
出国留学贷款5
其他贷款6" prop="otherLoanReason">
          <el-input v-model="form.otherLoanReason" placeholder="请输入贷款原因：
一手房按揭1
二手房按揭2
房抵贷3
公积金网贷4
出国留学贷款5
其他贷款6" />
        </el-form-item>
        <el-form-item label="信用卡张数" prop="creditCardCount">
          <el-input v-model="form.creditCardCount" placeholder="请输入信用卡张数" />
        </el-form-item>
        <el-form-item label="主要在用他行卡情况" prop="situation">
          <el-input v-model="form.situation" placeholder="请输入主要在用他行卡情况" />
        </el-form-item>
        <el-form-item label="关注点" prop="focus">
          <el-input v-model="form.focus" placeholder="请输入关注点" />
        </el-form-item>
        <el-form-item label="他行卡主办行" prop="otherBank">
          <el-input v-model="form.otherBank" placeholder="请输入他行卡主办行" />
        </el-form-item>
        <el-form-item label="是否借贷关联：
是/否" prop="loanRelevant">
          <el-input v-model="form.loanRelevant" placeholder="请输入是否借贷关联：
是/否" />
        </el-form-item>
        <el-form-item label="绑定情况：
微信1
支付宝2" prop="bind">
          <el-input v-model="form.bind" placeholder="请输入绑定情况：
微信1
支付宝2" />
        </el-form-item>
        <el-form-item label="支付绑定银行卡机构" prop="bindInstitution">
          <el-input v-model="form.bindInstitution" placeholder="请输入支付绑定银行卡机构" />
        </el-form-item>
        <el-form-item label="理财类型：
预期收益型1
净值型2
T+0理财" prop="moneyManage">
          <el-input v-model="form.moneyManage" placeholder="请输入理财类型：
预期收益型1
净值型2
T+0理财" />
        </el-form-item>
        <el-form-item label="信托等其他代销产品
是/否" prop="trust">
          <el-input v-model="form.trust" placeholder="请输入信托等其他代销产品
是/否" />
        </el-form-item>
        <el-form-item label="基金：
货币型1
混合型2
指数型3
股票型4
私募5
其他6" prop="fund">
          <el-input v-model="form.fund" placeholder="请输入基金：
货币型1
混合型2
指数型3
股票型4
私募5
其他6" />
        </el-form-item>
        <el-form-item label="保险：
期缴费型1
泵缴型2
年金型3
分红型4
重疾型5
其他6" prop="insurance">
          <el-input v-model="form.insurance" placeholder="请输入保险：
期缴费型1
泵缴型2
年金型3
分红型4
重疾型5
其他6" />
        </el-form-item>
        <el-form-item label="已持有保险产品保险公司" prop="insuranceCompany">
          <el-input v-model="form.insuranceCompany" placeholder="请输入已持有保险产品保险公司" />
        </el-form-item>
        <el-form-item label="贵金属：
收藏类投资型1
饰品型2" prop="nobleMetal">
          <el-input v-model="form.nobleMetal" placeholder="请输入贵金属：
收藏类投资型1
饰品型2" />
        </el-form-item>
        <el-form-item label="偏爱活动主题：
财富管理1
亲子教育2
健康管理3
文艺活动4
体育运动5
升学留学6
形象提升7
专业咨询8
其他9" prop="activity">
          <el-input v-model="form.activity" placeholder="请输入偏爱活动主题：
财富管理1
亲子教育2
健康管理3
文艺活动4
体育运动5
升学留学6
形象提升7
专业咨询8
其他9" />
        </el-form-item>
        <el-form-item label="${comment}" prop="productRemark">
          <el-input v-model="form.productRemark" placeholder="请输入${comment}" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listProduct, getProduct, delProduct, addProduct, updateProduct } from "@/api/kycinfo/product";

export default {
  name: "Product",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 【请填写功能名称】表格数据
      productList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        risk: null,
        keyProduct: null,
        myLoan: null,
        myLoanReason: null,
        otherLoan: null,
        otherLoanReason: null,
        creditCardCount: null,
        creditCardType: null,
        situation: null,
        focus: null,
        debitCardType: null,
        otherBank: null,
        loanRelevant: null,
        bind: null,
        bindInstitution: null,
        depositType: null,
        moneyManage: null,
        trust: null,
        fund: null,
        insurance: null,
        insuranceCompany: null,
        nobleMetal: null,
        activity: null,
        productRemark: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        userId: [
          { required: true, message: "用户id不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询【请填写功能名称】列表 */
    getList() {
      this.loading = true;
      listProduct(this.queryParams).then(response => {
        this.productList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        productId: null,
        userId: null,
        risk: null,
        keyProduct: null,
        myLoan: null,
        myLoanReason: null,
        otherLoan: null,
        otherLoanReason: null,
        creditCardCount: null,
        creditCardType: null,
        situation: null,
        focus: null,
        debitCardType: null,
        otherBank: null,
        loanRelevant: null,
        bind: null,
        bindInstitution: null,
        depositType: null,
        moneyManage: null,
        trust: null,
        fund: null,
        insurance: null,
        insuranceCompany: null,
        nobleMetal: null,
        activity: null,
        productRemark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.productId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加【请填写功能名称】";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const productId = row.productId || this.ids
      getProduct(productId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改【请填写功能名称】";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.productId != null) {
            updateProduct(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addProduct(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const productIds = row.productId || this.ids;
      this.$modal.confirm('是否确认删除【请填写功能名称】编号为"' + productIds + '"的数据项？').then(function() {
        return delProduct(productIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/product/export', {
        ...this.queryParams
      }, `product_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
